<template>
	<view>
		<myaddress></myaddress>
		<view class="cartTitle">
			<uni-icons type="shop" size="18"></uni-icons>
			<text>购物车</text>
		</view>
		<uni-swipe-action>
			<uni-swipe-action-item :right-options="options" v-for="(item,i) in cart" @click="removeItem(i,$event)">
				<view class="item">
					<label class="radio">
						<radio @click="radioCheck(i)" color="red" :checked="item.goods_state"></radio>
					</label>
					<view class="divImg">
						<image style="width:100%;" :src="item.goods_small_logo" mode="widthFix"></image>
					</view>
					<view class="info">
						<view class="infoName">{{item.goods_name}}</view>
						<view class="other">
							<view class="price">{{item.goods_price}}</view>
							<view class="bCon">
								<view @click="minu(i)">-</view>
								<view>{{item.goods_count}}</view>
								<view @click="add(i)">+</view>
							</view>
						</view>
					</view>
				</view>
			</uni-swipe-action-item>
		</uni-swipe-action>
		<view style="height:100rpx;"></view>
		<view class="jiesuan">
			<label class="radio">
				<radio :checked="all" @click="Check()">
					<text>全选</text>
				</radio>
			</label>
			<view>{{total}}</view>
			<view class="goInterdent">结算</view>
		</view>
	</view>
</template>


<script setup>
	import myaddress from '../../components/my-address/my-address'
	import {reactive,ref,onMounted} from 'vue'
	import {myStore} from '../../store/store.js';
	import {storeToRefs} from 'pinia'
	const catStore = myStore();
	const {cart} = storeToRefs(catStore);
	
	
	const total = ref(0);
	//勾选商品
	const radioCheck = i =>{
		catStore.updataCart(i);
		let k = cart.value.every(item=>{
			return item.goods_state
		});
		all.value = k
		let price = 0
		cart.value.forEach(item=>{
			if(item.goods_state){
				price += item.goods_price * item.goods_count
			}
		})
		total.value = price
	}
	const Check = () =>{
		cart.value.forEach(item=>{
			if(all){
				item.goods_state = true;
			}
		})
		let price = 0
		cart.value.forEach(item=>{
			if(item.goods_state){
				price += item.goods_price * item.goods_count
			}
		})
		total.value = price
	}
	const minu = i =>{
		if(cart.value[i].goods_count - 1 > 0){
			catStore.updataCount(i,cart.value[i].goods_count - 1)
		}else{
			uni.showToast({
				title:"数量不能为0"
			})
		}
		uni.setTabBarBadge({
			index: 2,
			text:catStore.total.toString(),
		})
	}
	const add = i =>{
		catStore.updataCount(i,cart.value[i].goods_count + 1);
		uni.setTabBarBadge({
			index: 2,
			text:catStore.total.toString(),
		})
	}
	const removeItem = (i,e) =>{
		console.log(i,e);
		if(e.index == 0){
			catStore.removeGoodsItem(i);
			uni.setTabBarBadge({
				index: 2,
				text:catStore.total.toString(),
			})
		}
	}
	const options = reactive([
		{
      text: '删除', // 显示的文本内容
      style: {
        backgroundColor: '#C00000' // 按钮的背景颜色
      }},
	  {
	    text: '确定', // 显示的文本内容
	    style: {
	      backgroundColor: '#00c000' // 按钮的背景颜色
	    }}
	])
	const all = ref(true);
	onMounted(()=>{
		let k = cart.value.every(item=>{
			return item.goods_state
		});
		all.value = k;
		let price = 0;
		cart.value.forEach(item=>{
			if(item.goods_state){
				price += item.goods_price * item.goods_count
			}
		})
		total.value = price
	})
</script>
<script>
	import {myStore} from '../../store/store.js';
	const catStore = myStore();
	export default {
		data() {
			return {
				
			};
		},
		onLoad(){
			
		},
		onShow(){
			uni.setTabBarBadge({
				index: 2,
				text:catStore.total.toString(),
			})
		},
	}
</script>

<style lang="scss">
	.item{
		display:flex;
		padding:20rpx;
	}
	.divImg{
		width: 120rpx;
		height:120rpx;
		margin-right:20rpx;
	}
	.info{
		flex:1;
		display:flex;
		flex-direction:column;
		justify-content:space-between;
	}
	.other{
		display:flex;
		justify-content:space-between;
	}
	.price{
		color:red;
		font-size:28px;
		font-weight:bold;
	}
	.bCon{
		width:240rpx;
		display:flex;
		border:1px solid #dedede;
		border-radius:4px;
		height:70rpx;
		line-height:70rpx;
	}
	.bCon view{
		flex:1;
		text-align:center;
	}
	.radio{
		display:flex;
		align-items:center;
	}
	.cartTitle{
		padding:0 20rpx;
		height:80rpx;
		line-height:80rpx;
		border-bottom:1px solid #dedede;
	}
	.jiesuan{
		display:flex;
		justify-content:space-between;
		align-items:center;
		position:fixed;
		bottom:0;
		width:100%;
	}
	.goInterdent{
		width:200rpx;
		height:100rpx;
		text-align:center;
		line-height:100rpx;
		color:#fff;
		background:red;
	}
</style>
